<template>
  <div>
    <div>vuex-基础补充</div>
    <hr>
    <div>点击按钮控制数据累加</div>
    <div>当前数量：{{ $store.state.count }}</div>
    <div>加权数量：{{ $store.getters.specialCount }}</div>
    <div>
      <button @click="handleClick">点击</button>
    </div>
    <hr>
    <div>模块化</div>
    <ul>
      <!-- <li v-for="item in $store.state.book.bookList" :key="item.id">{{ item.name }}</li> -->
      <li v-for="item in bookList" :key="item.id">{{ item.name }}</li>
    </ul>
    <ul>
      <li v-for="item in $store.getters['book/bookInfo']" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addBook({id: 2, name: '西游记'})">添加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      n: 100
    }
  },
  computed: {
    // 把state中状态属性bookList映射为计算属性
    ...mapState('book', ['bookList'])
  },
  methods: {
    // 把mutation的addBook映射为一个方法
    ...mapMutations('book', ['addBook']),
    handleClick () {
      // 触发mutation，修改数据
      // this.$store.commit('updateCount', 1)
      // 触发action，2秒后变更数据
      this.$store.dispatch('updateCount', 2)
    }
    // addBook () {
    //   // 添加一本书
    //   // this.$store.commit('book/addBook', {
    //   //   id: 2,
    //   //   name: '活着'
    //   // })
    //   this.addBook({
    //     id: 2,
    //     name: '明朝那些事'
    //   })
    // }
  }
}
</script>
